<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>全选：<input type="checkbox" v-model="checkall" @change="changeallfn"></div>
        <hr>
        <div v-for="(item, index) in list" :key="index">
            <input type="checkbox" v-model="item.checked" @change="checkfn">
             <span>名称：{{item.tit}}</span>
             <span>价格：{{item.price}}</span>
             <button @click="del(index)">--</button>
             <span>{{item.count}}</span>
             <button @click="add(index)">++</button>

        </div>
        <hr>
        <div>总个数；{{ allcount}}</div>
        <div>总价{{totalPrice}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
              list:[
                  {
                      tit:"篮球",
                      price:100,
                      count:0,
                      checked:false
                  },
                  {
                      tit:"足球",
                      price:50,
                      count:0,
                      checked:false
                  },
                  {
                      tit:"乒乓球",
                      price:2,
                      count:0,
                      checked:false
                  },
              ],
              checkall:false
            },
            methods: {
                add(index) { // 加加
                    this.list[index].count++
                },
                del(index){ // 减减
                    this.list[index].count--
                    if (  this.list[index].count < 0) {
                        this.list[index].count = 0
                    }
                },
                changeallfn(){ // 全选
                    console.log(this.checkall);
                    this.list.forEach(element => {
                        element.checked = this.checkall
                    });
                },
                checkfn(){ // 单选
                    this.checkall = this.list.every((item)=>{
                        return item.checked
                    })
                }

            },
            computed: {
                allcount () { // 购物车求总个数
                    return this.list.reduce((a,b)=>{
                        return a + (b.checked?b.count:0) // 如果当前项选中了再去计算个数，没选中直接加0就行
                    },0)
                },
                totalPrice(){ // 购物车求总价
                    return this.list.reduce((a,b)=>{
                        return a+ (b.checked?b.count*b.price:0) // 如果当前项选中了再去计算个数，没选中直接加0就行
                    },0)
                }
            },
        })

    </script>
</body>
</html>